/*
  学习目标：useHistory  和 useLocation 和 useParams
  useHistory:
    作用: 获取history对象
    props.history必须经过Route组件设置匹配规则
    useHistory: 任意的函数式组价都可以获取
  useLocation:
    作用: 获取location对象
  useParams: 
    作用: 获取params对象
*/

import React from 'react';

import {
  BrowserRouter as Router,
  Route,
  useHistory,
  useLocation,
  useParams,
} from 'react-router-dom';
import { Switch } from 'react-router-dom';

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/home" component={Home}></Route>
        <Route path="/my" component={My}></Route>
        <Route path="/find/:id" component={Find}></Route>
      </Switch>

      <div>App</div>
    </Router>
  );
}

function Home({ history }) {
  return (
    <>
      <h1>Home</h1>
      <Header></Header>
    </>
  );
}
function My() {
  return <h1>My</h1>;
}

function Find() {
  const params = useParams();
  console.log('params  ----->  ', params);
  return <h1>My</h1>;
}

function Header(params) {
  const history = useHistory();

  const location = useLocation();
  console.log('location  ----->  ', location);
  console.log('history  ----->  ', history);
}
